import React from "react"
import { useDispatch, useSelector } from "react-redux"
import { getArticleList } from "../../store/actions"
import ArticlesItem from "../../components/ArticlesItem"
import { InfiniteScroll, PullToRefresh } from "antd-mobile"
function Articles({ id }) {
  const dispatch = useDispatch()
  // useEffect(() => {
  //   dispatch(getArticleList(id, Date.now() + ""))
  // }, [id])

  const { articles, timestamp } = useSelector((state) => state.home)

  async function loadMore() {
    await dispatch(getArticleList(id, timestamp))
  }
  // 下拉刷新
  const onRefresh = async () => {
    await dispatch(getArticleList(id, Date.now() + ""))
  }
  const hasMore = timestamp !== null
  return (
    <div>
      <PullToRefresh onRefresh={onRefresh}>
        <div>
          {articles?.length > 0 &&
            articles.map((item, index) => {
              return <ArticlesItem key={index} articles={item}></ArticlesItem>
            })}
        </div>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}

export default Articles
